<template>
	<view class="tab-bar">
		<view v-for="(item,index) in filteredList" :key="index" class="tab-bar-item" @click="switchTab(item, index)"
			v-if="item.showTab">
			<image class="tab_img" :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
			<view class="tab_text" :style="{color: selected === index ? selectedColor : color}">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selected: { // 当前选中的tab index
				type: Number,
				default: 0
			},
			isAdmin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				color: "#333333", //未选择字体颜色
				selectedColor: "#00BAAD", //选中的字体颜色
				list: [
					//用户端首页
					{
						"pagePath": "/pages/tabBar/index1/index1",
						"text": "首页",
						"iconPath": "../static/tabBar/order.png",
						"selectedIconPath": "../static/tabBar/order_active.png",
						"showTab": true
					},
					//管理员首页
					{
						"pagePath": "/pages/tabBar/index2/index2",
						"text": "首页",
						"iconPath": "../static/tabBar/order.png",
						"selectedIconPath": "../static/tabBar/order_active.png",
						"showTab": true
					},
					//人员管理
					{
						"pagePath": "/pages/tabBar/peopleManagement/peopleManagement",
						"text": "人员管理",
						"iconPath": "../static/tabBar/renyuanguanli.png",
						"selectedIconPath": "../static/tabBar/renyuanguanli_active.png",
						"showTab": true
					},
					//统计管理
					{
						"pagePath": "/pages/tabBar/statistics/statistics",
						"text": "统计管理",
						"iconPath": "../static/tabBar/tongji.png",
						"selectedIconPath": "../static/tabBar/tongji_active.png",
						"showTab": true
					},
					//个人中心
					{
						"pagePath": "/pages/tabBar/mine/mine",
						"text": "个人中心",
						"iconPath": "../static/tabBar/mine.png",
						"selectedIconPath": "../static/tabBar/mine_active.png",
						"showTab": true
					}
				]
			}
		},
		// watch: {
		// 	isAdmin: {
		// 		handler(newValue, oldValue) {
		// 			console.log('改后的值是：' + newValue)
		// 			console.log('原来的值是：' + oldValue)
		// 			if(newValue){
		// 				this.changeRole();
		// 			}
		// 		},
		// 		immediate:true,//第一次就触发监听
		// 		deep:true //深度监听
		// 	}
		// },
		//计算属性
		computed: {
			filteredList() {
				let listToShow = this.list.map(item => ({
					...item
				}));
				// 如果是管理员
				if (this.isAdmin) {
					// 隐藏非管理员首页（假设是list[0]）
					listToShow[0].showTab = false;
					// 显示其他所有项，包括管理员专属
					for (let i = 1; i < listToShow.length; i++) {
						listToShow[i].showTab = true;
					}
				} else {
					// 如果不是管理员
					// 隐藏管理员专属项（假设是list[1]和list[2]）
					listToShow = listToShow.map((item, index) =>
						index === 1 || index === 2 ? {
							...item,
							showTab: false
						} : item
					);
				}
				return listToShow;
			}
		},
		onLoad() {

		},
		created() {
			console.log("点击的第--->", this.selected, "个导航条");
		},
		mounted() {
			console.log("挂载", this.isAdmin);
		},
		methods: {
			/**
			 * 路由跳转
			 * @param {Object} item
			 * @param {Object} index
			 */
			switchTab(item, index) {
				let url = item.pagePath;
				uni.switchTab({
					url
				})
			},

		}
	}
</script>

<style lang="less">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);

		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.tab_img {
				width: 56rpx;
				height: 56rpx;
			}

			.tab_text {
				font-size: 22rpx;
				margin-top: 9rpx;
				font-weight: 900;
			}
		}
	}
</style>